Day23:Vue.js（五）

第 12 屆 iThome 鐵人賽

DAY 23

Modern Web

小白的JavaScript讀書日記系列第 23 篇

12th鐵人賽

q20038848

2020-09-24 09:27:25

1007 瀏覽

分享至

條件判斷 v-if/v-show

v-if
使用基本上和if...else if大同小異，當條件成立時，畫面就會被渲染。要記得的是v-else元素必須跟在v-if or v-else-if的元素後面，不然不會被識別。

<body>
  <div id="demo">
    <h1 v-if="awesome">Vue.js v3.0</h1>
    <h1 v-else>One Pieces</h1>
    <div v-if="Math.random()>0.5" style="color:red">Now Released!!!</div>
    <div v-else style="color:blue">
      Now Released!!!
    </div>
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          awesome: true
        }
      }
    }).mount('#demo');
  </script>
</body>

在上述範例我們可以看到，Vue.js v3.0 不會看到 One Pieces，這是因為在data裡面awesome被設定為true，這邊可以試著將它改成false看看會變成什麼～
那Now Released!!!這邊則是取亂數，當亂數大於0.5則顯示style="color:red"這段內的程式碼，如果小於就顯示下面style="color:blue"內的程式碼，這邊可以試著重新刷新瀏覽器看看效果～

那如果有多個元素想要表示，可以用<template>將其包裹起來，當條件成立時，才顯示對應的元素：

<body>
  <div id="demo">
    <template v-if="value === 'Vue'">
      <h1>Vue</h1>
      <p>Vue-P1</p>
      <p>Vue-P2</p>
    </template>
    <template v-else>
      <h1>JavaScript</h1>
      <p>JS-P1</p>
      <p>JS-P2</p>
    </template>
    <input type="text" name="" id="" v-model="value" placeholder="please enter Vue">
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          value: ''
        }
      }
    }).mount('#demo');
  </script>
</body>

上述範例中當value="Vue"會顯示Vue那段，若不是則顯示JavaScript那段，這裡可以在InputBox裡面輸入Vue看看效果喔～

v-show
用法基本和v-if一樣，條件成立時顯示，但要注意的是v-show不可搭配v-else``v-else-if以及<template>！

<body>
  <div id="demo">
    <h2 v-show="ok">Vue.js v3.0 好棒棒！！！</h2>
    <input type="button" value="click" v-on:click="btn">
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          // awesome: true,
          ok: true
          // value: ''
        }
      },
      methods: {
        btn: function () {
          return this.ok = !this.ok
        }
      }
    }).mount('#demo');
  </script>
</body>

v-if v.s v-show
兩者的差異還有，v-if是真正的條件建立，它會依照條件成立與否，去銷毀或者重建及綁定的事件，如果一開始條件為false，元素在一開始就不會被建立。
而v-show則是都會建立元素，只是有沒有加上CSS中的display:none的屬性。
使用區別：

如果元件會頻繁切換：v-show
反之：v-if

v-for 動態產生多筆資料

v-for指令提供了將『陣列』或『物件』類型的資料進行迭代渲染在畫面上。

v-for與陣列
語法：v-for="item in items"

item：被迭代的陣列元素別名（可以任意命名，合法就行）
items：來源資料陣列

<body>
  <div id="demo">
    <ul>
      <li v-for='i in books'>{{author}}:{{i}}</li>
    </ul>
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          author: '金庸',
          books: ['射雕英雄傳', '神鵰俠侶', '倚天屠龍記']
        }
      }

    }).mount('#demo')
  </script>
</body>

上述範例中i＝語法中的item；books＝items。

同時也提供了第二個引數，可以加入對應的index：

    <ul>
      <li v-for='(i,index) in books'>{{index}}{{author}}:{{i}}</li>
    </ul>

我們將上述的例子稍做修改，加入了index之後，可以看到以下畫面：

可以和沒修改前的比較看看～

v-for與物件
基本的操作方法與陣列一樣

<body>
  <div id="demo">
    <ul>
      <li v-for='val in books'>{{val}}</li>
    </ul>
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          books: {
            author: '金庸',
            title: '神鵰俠侶',
            publishDate: '1959/5/20'
          }
        }
      }
    }).mount('#demo')
  </script>
</body>

同時也可以列出對應的key以及index

<body>
  <div id="demo">
    <ul>
      <li v-for='(val,key,index) in books'>{{index}} - {{key}}：{{val}}</li>
    </ul>
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          books: {
            author: '金庸',
            title: '神鵰俠侶',
            publishDate: '1959/5/20'
          }
        }
      }
    }).mount('#demo')
  </script>
</body>

這邊要注意物件在JavaScript沒有順序，會依照瀏覽器的Object.key()實作方式的不同而有差異。因此要確保順序不會變，最好的方式就是將物件轉陣列：

<body>
  <div id="demo">
    <ul>
      <li v-for='(i,index) in books'>{{i.author}}：{{i.name}}</li>
    </ul>
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          books: [
            { author: '金庸', name: '射雕英雄傳' },
            { author: '古龍', name: '絕代雙驕' },
            { author: '黃易', name: '尋秦記' }
          ]
        }
      }
    }).mount('#demo')
  </script>
</body>

v-for排序與過濾
v-for沒有提供排序與過濾的功能，但我們可以透過之前學到的methods和computed來實現：

<body>
  <div id="demo">
    <ul>
      <li v-for='(i,index) in search'>{{i.author}}：{{i.name}}</li>
    </ul>
    <ul>
      <li v-for='n in sortedArr'>{{n}}</li>
    </ul>
  </div>
  <script>
    const vm = Vue.createApp({
      data() {
        return {
          arr: [1, 2, 3, 4, 5, 6, 7],
          books: [
            { author: '金庸', name: '射雕英雄傳'},
            { author: '古龍', name: '絕代雙驕'},
            { author: '黃易', name: '尋秦記'}
          ]
        }
      },
      computed: {
        sortedArr: function () {
          return [...this.arr].sort((a, b) => b - a)
        },
        search() {
          return this.books.filter(i => i.author == '金庸')
        }
      }
    }).mount('#demo')
  </script>
</body>

上述範例我們可以看到，我們將排序和過濾的方法寫在computed中，等於先排好，過濾好，才用v-for印出來。
這邊要注意的是.sort會影響陣列的順序，因此先用[...this.arr]複製一份新的陣列來排序。

Try1:找出comics陣列中author:'冨樫義博'的漫畫。

comics:[
{author:'冨樫義博',book:'幽遊白書'},
{author:'高橋留美子',book:'亂馬1/2'},
{author:'冨樫義博',book:'獵人'},
{author:'臼井儀人',book:'蠟筆小新'},
{author:'鳥山明',book:'七龍珠'},
{author:'高橋留美子',book:'犬夜叉'},
{author: '吾峠呼世晴', book: '鬼滅之刃'}
]